<template>
  <div class="yuanxing">
    <div class="search  border_style bg_style">
      <YsInput class="search-input" clearable @on-focus="clickBlur(true)" @on-blur="clickBlur(false)"
        v-model.trim="keyword" placeholder="请输入名称或编码">
        <YsIcon type="icon iconfont icon-sousuo" @click.native="gethdFn" slot="suffix" />
      </YsInput>
      <YsButton type="primary" class="searchBtn" @click="gethdFn">查询</YsButton>
      <div class="open-btn">
        <YsButton class="right-between" @click="addPrentModal">新增</YsButton>
      </div>
    </div>
    <div class="hd-xian border_style">
      <drag-zone class="zone2" :options="options">
        <drag-content class="d-vertical c1">
          <div class="item2 i1">
            <top-hd-table ref="hdDom" @setPigment="setPigment" :rule_type="6" modal_name="黑度检测规则"></top-hd-table>
          </div>
        </drag-content>
        <drag-handle class="handle"></drag-handle>
        <drag-content class="d-vertical c2">
          <div class="item2 i2">
            <div class="table-h bg_style">
              <div class="search2 text_01">
                共{{page.allTotal||0}}条
                <div class="open-btn">
                  <YsButton type="primary" class="searchBtn" @click="openModal">编辑</YsButton>
                </div>
              </div>
              <div class="table-inner">
                <proTable class="table-st" :hasPagination="false" :loading="page.tableLoad" :columns="page.columns"
                  :data="page.data" :total="page.allTotal">
                </proTable>
              </div>
            </div>
          </div>
        </drag-content>
      </drag-zone>
    </div>
    <pro-dialog class="setdialog" ref="exitHeiDu" width="628" :nopadding="true" title="编辑黑度值">
      <div style=" padding: 0px 24px 16px;">
        <div class="table-borer border_style">
          <YsTable class="table-2" :class="curTheme+'-table'" height="400" :columns="columns2" :border="true"
            width="100%" :data="ruleTable">
            <template slot="num_2" slot-scope="{ row }">
              <YsInput v-model="row.blackness"></YsInput>
            </template>
            <template slot="num_3" slot-scope="{ row }">
              <YsInput v-model="row.remark"></YsInput>
            </template>
          </YsTable>
        </div>
        <YsRow class="foot-btn" style="margin-top: 18px">
          <YsButton @click="handleCancel()" size="large">关闭</YsButton>
          <YsButton @click="handleOk()" :disabled="btnDisabled" size="large" type="primary">确定</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>

<script>
import { dragZone, dragHandle, dragContent } from "vue-drag-zone";
import { mapActions, mapState, mapMutations } from "vuex";
import TopHdTable from "./components/topHdTable";
export default {
  name: "HeiDuJianCe",
  components: {
    dragZone,
    dragHandle,
    dragContent,
    TopHdTable,
  },
  data() {
    return {
      btnDisabled: false,
      options: {
        direction: "vertical", //横向 horizontal   竖向 vertical
      },
      keyword: "",
      inputFocus: false,
      ruleObj: {},
      ruleTable: [],
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            title: "序号",
            width: 100,
            type: 'index',
          },
          {
            title: "像素值下限",
            tooltip: true,
            minWidth: 140,
            key: "min_pixel",
          },
          {
            title: "像素值上限",
            minWidth: 140,
            tooltip: true,
            key: "max_pixel",
          },
          {
            title: "色阶",
            minWidth: 80,
            tooltip: true,
            key: "color_order",
          },
          {
            title: "黑度",
            minWidth: 80,
            tooltip: true,
            key: "blackness",
            render: (h, params) => {
              return h("span", `${params.row.hasOwnProperty('blackness') ? params.row.blackness : "--"}`)
            }
          },
          {
            title: "备注",
            minWidth: 80,
            key: "remark",
            tooltip: true,
            render: (h, params) => {
              return h("span", `${params.row.hasOwnProperty('remark') ? params.row.remark : "--"}`)
            }
          }
        ],
        data: [],
      },
      columns2: [
        {
          title: "色阶",
          key: "color_order",
        },
        {
          title: "黑度值",
          render: (h, params) => {
            return h('div', [
              h('YsInput', {
                class: `inputBorder`,
                props: {
                  maxlength: 6,
                  // formatter: value => `${value}`.match(/^\d*(\.?\d{0,2})/g)[0],
                  value: params.row.blackness
                },
                on: {
                  'on-change': (event) => {
                    var value = '' + event.target.value.toString();
                    value = value
                      .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
                      .replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
                      .replace(/^\./g, '')    //保证第一个为数字而不是.
                      .replace('.', '$#$')
                      .replace(/\./g, '')
                      .replace('$#$', '.')
                      .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
                    if (value.indexOf('.') < 0 && value != '') {
                      // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
                      value = parseFloat(value);
                    }
                    this.ruleTable[params.index].blackness = value
                  },
                  // let val = event.target.value.toString().replace(/[^\d^\.?]+/g, "").replace(/^0+(\d)/, "$1").replace(/^\./, "0.").match(/^\d*(\.?\d{0,2})/g)[0] || ""
                }
              })
            ])
          }
        },
        {
          title: "备注",
          render: (h, params) => {
            return h('div', [
              h('YsInput', {
                class: `inputBorder`,
                props: {
                  maxlength: 30,
                  value: params.row.remark,

                  //  formatter: value => `${value}`.replace(/\B(?=(\d{5})+(?!\d))/g, ','),
                  //    e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
                },
                on: {
                  'on-change': (event) => {
                    this.ruleTable[params.index].remark = event.target.value
                  }
                }
              })
            ])
          }
        },
      ],
    };
  },
  computed: {
    ...mapState(['curTheme'])
  },
  methods: {
    ...mapActions(["getRuleOfBlacknessAPI", "setBlacknessEditAPI"]),
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    },
    //打开模态框
    openModal() {
      if (this.ruleTable.length > 0) {
        this.handleRuleOfBlacknessFn()
        this.$refs.exitHeiDu.show()
      }
      // else{
      //    this.$YsMessage.info('规则内容为空');
      // }
    },
    //编辑黑度值 确认
    handleOk() {
      this.setRuleOfBlacknessFn()
    },
    //获取黑度值
    gethdFn() {
      this.$refs.hdDom.getHeiDuJianCe(this.keyword)
    },
    //打开弹出
    addPrentModal() {
      this.$refs.hdDom.openModal()
    },

    //编辑黑度值 取消
    handleCancel() {
      this.$refs.exitHeiDu.close()
    },
    //获取色素值数据
    setPigment(item) {
      this.ruleObj = this.$options.data().ruleObj
      this.ruleObj = item
      this.handleRuleOfBlacknessFn()
    },
    //编辑色值
    setRuleOfBlacknessFn() {
      let infos = this.ruleTable.map(v => {
        return { id: v.id, blackness: v.blackness, remark: v.remark }
      }).filter(t => t.blackness != undefined || t.remark != undefined)
      this.btnDisabled = true
      this.setBlacknessEditAPI({ infos: infos, rule_id: this.ruleObj.id }).then((res) => {
        let { data, msg, scode, status } = res;
        this.btnDisabled = false
        if (status === "ok") {
          this.handleRuleOfBlacknessFn()
          this.$YsMessage.success(data.message_text);
          this.$refs.exitHeiDu.close()
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.btnDisabled = false
        this.$YsMessage.error("编辑失败");
      });
    },

    //获取色值
    handleRuleOfBlacknessFn() {
      this.ruleTable = []
      this.page.data = []
      this.getRuleOfBlacknessAPI({ rule_id: this.ruleObj.id }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.page.data = data.blacknessInfos
          this.ruleTable = JSON.parse(JSON.stringify(data.blacknessInfos))
        } else {
          this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.$YsMessage.error("编辑失败");
      });
    },

  }
};
</script>

<style lang="less" scoped>
// 竖向
.yuanxing {
  height: calc(100% - 20px);

  .zone2 {
    height: 100%;
  }

  .zone2 .d-vertical {
    width: 100%;
    height: 50%;
    overflow: hidden;
  }

  .handle.vertical {
    width: 100%;
    height: 3px;
    cursor: row-resize !important;
    background: rgba(114, 131, 157, 0.33);
  }

  .zone2 .item2 {
    width: 100%;
    height: 100%;
  }

  .zone2 .c1 {
    min-height: 200px;
  }

  .zone2 .c2 {
    min-height: 200px;
  }

  .zone2 .item2.i1 {
    // background: #999;
    overflow: auto;
  }

  .zone2 .item2.i2 {
    // background: #777;
  }
}

.table-h {
  height: 100%;

  // border: 1px solid #ccc;
  // border-radius: 4px;
  .table-inner {
    height: calc(100% - 64px);
  }
}

.search2 {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 16px 22px 8px 18px;

  .open-btn {
    margin-left: auto;
  }
}

.table-borer {
  .table-2 {
    box-shadow: none !important;
    border: none;
    // height: 600px;
  }

  border: 1px solid #e1e6f0;
  border-radius: 4px;
  opacity: 0.8;
}

.setdialog {
  /deep/ .ivu-btn {
    min-width: 96px !important;
  }
}

/deep/ .inputBorder {
  .ivu-input {
    border: none !important;
  }
}

.theme-white-table {

  /deep/.ivu-table-border td,
  /deep/ .ivu-table-border th {
    border-right: 1px solid #e1e6f0;
  }
}

/deep/.ivu-modal-header {
  padding: 18px 24px !important;
}

/deep/.ivu-modal-close {
  right: 14px !important;
}

.hd-xian {
  height: calc(100% - 80px);
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  overflow: hidden;
}

.search {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 72px;
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  margin-bottom: 8px;

  .open-btn {
    margin-left: auto;

    button:first-child {
      // margin-right: 10px;
    }

    button:last-child {
      // margin-left: 10px;
    }
  }

  .search-input {
    height: 40px;
    width: 208px;
    margin-right: 10px;
    border-radius: 4px;
  }

  .search-btn {
    margin-left: auto;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
  margin-right: 0 !important;
}

.right-between {
  width: 80px;
  min-width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid #0061ff;
  opacity: 1;
  border-radius: 4px;
  color: #0091ff;
  font-size: 16px;
  font-family: PingFang SC;
}
</style>

